<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('学生考勤统计')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true" onclick="query(0)">周汇总</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false" onclick="query(1)">月汇总</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false" onclick="query(2)">学期汇总</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content" id="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body">
                        <div class="echarts" id="echarts-bar-week-grade" ></div>
                        <strong>年级数据</strong>
                        <div class="col-sm-12 select-table table-striped">
                            <table id="week-grade-table"></table>
                        </div>
                        <div class="col-sm-12">
                            <div class="echarts m-t" id="echarts-bar-week-calzz" ></div>
                        </div>

                        <div class="col-sm-12">
                            <strong>班级数据</strong>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="week-clazz-table"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">
                        <div class="echarts" id="echarts-bar-month-grade" ></div>
                        <strong>年级数据</strong>
                        <div class="col-sm-12 select-table table-striped">
                            <table id="month-grade-table"></table>
                        </div>
                        <div class="col-sm-12">
                            <div class="echarts m-t" id="echarts-bar-month-clazz" ></div>
                        </div>
                        <div class="col-sm-12">
                            <strong>班级数据</strong>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="month-clazz-table"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-3" class="tab-pane">
                    <div class="panel-body">
                        <div class="echarts" id="echarts-bar-half-grade"></div>
                        <strong>年级数据</strong>
                        <div class="col-sm-12 select-table table-striped">
                            <table id="half-grade-table"></table>
                        </div>
                        <div class="col-sm-12">
                            <div class="echarts m-t" id="echarts-bar-half-clazz"></div>
                        </div>
                        <div class="col-sm-12">
                            <strong>班级数据</strong>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="half-clazz-table"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var monthGradeId= "echarts-bar-month-grade";
    var monthGradeChart = echarts.init(document.getElementById(monthGradeId));
    var weekGradeId = "echarts-bar-week-grade";
    var weekGradeChart = echarts.init(document.getElementById(weekGradeId));
    var halfGradeId = "echarts-bar-half-grade";
    var halfGradeChart = echarts.init(document.getElementById(halfGradeId));

    var monthClazzId= "echarts-bar-month-clazz";
    var monthClazzChart = echarts.init(document.getElementById(monthClazzId));
    var weekClazzId = "echarts-bar-week-calzz";
    var weekClazzChart = echarts.init(document.getElementById(weekClazzId));
    var halfClazzId = "echarts-bar-half-clazz";
    var halfClazzChart = echarts.init(document.getElementById(halfClazzId));

    var tableOpt = {
        columns: [{
            field: 'id',
            title: 'ID',
            visible: false
        }, {
            field: 'name',
            title: '年级'
        }, {
            field: 'total',
            title: '应签到'
        }, {
            field: 'advanceTwenty',
            title: '提前20分钟'
        }, {
            field: 'advanceTen',
            title: '提前10分钟'
        }
            , {
                field: 'onTime',
                title: '准时'
            }
            , {
                field: 'dutyNum',
                title: '迟到'
            }
        ],
        data:[]
    };

    var tableOpt1 = {
        columns: [{
            field: 'id',
            title: 'ID',
            visible: false
        }, {
            field: 'name',
            title: '班级'
        }, {
            field: 'total',
            title: '应签到'
        }, {
            field: 'advanceTwenty',
            title: '提前20分钟'
        }, {
            field: 'advanceTen',
            title: '提前10分钟'
        }
            , {
                field: 'onTime',
                title: '准时'
            }
            , {
                field: 'dutyNum',
                title: '迟到'
            }
        ],
        data:[]
    };

    $(window).resize(function() {
        monthGradeChart.resize();
        weekGradeChart.resize();
        halfGradeChart.resize();
        monthClazzChart.resize();
        weekClazzChart.resize();
        halfClazzChart.resize();
    });
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        monthGradeChart.resize();
        weekGradeChart.resize();
        halfGradeChart.resize();
        monthClazzChart.resize();
        weekClazzChart.resize();
        halfClazzChart.resize();
    });
    $(function() {
        $("#week-grade-table").bootstrapTable(tableOpt);
        $("#week-clazz-table").bootstrapTable(tableOpt1);
        $("#month-grade-table").bootstrapTable(tableOpt);
        $("#month-clazz-table").bootstrapTable(tableOpt1);
        $("#half-grade-table").bootstrapTable(tableOpt);
        $("#half-clazz-table").bootstrapTable(tableOpt1);
        query(0);
    });

    function query(id){
        queryDatas(id);
        queryClazzDatas(id);
    }

    function queryDatas(id) {
        $.ajax({
            type: "get",
                url:ctx + "school/record/reports/1/"+id+"/0",
                async:false,
                dataType: "json",
                success: function(res){
                    // console.log(res);
                    if(id==0){
                        makeWeekChart(res);
                    }
                    if(id==1){
                        makeMonthChart(res);
                    }
                    if(id==2){
                        makeHalfChart(res);
                    }
                }
            }
        );
    };

    function  queryClazzDatas(id){
        $.ajax({
                type: "get",
                url:ctx + "school/record/reports/2/"+id+"/0",
                async:false,
                dataType: "json",
                success: function(res){
                    // console.log(res);
                    if(id==0){
                        makeWeekClazzChart(res);
                    }
                    if(id==1){
                        makeMonthClazzChart(res);
                    }
                    if(id==2){
                        makeHalfClazzChart(res);
                    }
                }
            }
        );
    }

    var baseChartOption = {
        title : {
            text: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['提前20分钟','提前10分钟','准时','迟到']
        },
        grid:{
            x:30,
            x2:30,
            y2:24
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : []
    }

    function makeWeekChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '年级-出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt;
        tab1.data = res.datas;
        $("#week-grade-table").bootstrapTable('destroy');
        $("#week-grade-table").bootstrapTable(tab1);
        weekGradeChart.setOption(baroption);
        window.onresize = weekGradeChart.resize;
        weekGradeChart.resize();
    }

    function makeWeekClazzChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '班级-出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;

        var tab1 = tableOpt1;
        tab1.data = res.datas;
        // for(let i=0;i<res.datas.length;i++){
        //     tab1.data[i] = res.datas[i];
        // }
        $("#week-clazz-table").bootstrapTable('destroy');
        $("#week-clazz-table").bootstrapTable(tab1);
        weekClazzChart.setOption(baroption);
        window.onresize = weekClazzChart.resize;
        weekClazzChart.resize();
    }

    function makeMonthChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '年级-出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt;
        tab1.data = res.datas;
        $("#month-grade-table").bootstrapTable('destroy');
        $("#month-grade-table").bootstrapTable(tab1);
        monthGradeChart.setOption(baroption);
        window.onresize = monthGradeChart.resize;
        monthGradeChart.resize();
    }

    function makeMonthClazzChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '班级-出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt1;
        tab1.data = res.datas;
        $("#month-clazz-table").bootstrapTable('destroy');
        $("#month-clazz-table").bootstrapTable(tab1);
        monthClazzChart.setOption(baroption);
        window.onresize = monthClazzChart.resize;
        monthClazzChart.resize();
    }

    function makeHalfChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '年级-出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt;
        tab1.data = res.datas;
        $("#half-grade-table").bootstrapTable('destroy');
        $("#half-grade-table").bootstrapTable(tab1);
        halfGradeChart.setOption(baroption);
        window.onresize = halfGradeChart.resize;
        halfGradeChart.resize();
    }

    function makeHalfClazzChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '班级-出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt1;
        tab1.data = res.datas;
        $("#half-clazz-table").bootstrapTable('destroy');
        $("#half-clazz-table").bootstrapTable(tab1);
        halfClazzChart.setOption(baroption);
        window.onresize = halfClazzChart.resize;
        halfClazzChart.resize();
    }

    $(function() {
        var options = {
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field : 'userId',
                    title : '用户ID'
                },
                {
                    field : 'userCode',
                    title : '用户编号'
                },
                {
                    field : 'userName',
                    title : '用户姓名'
                },
                {
                    field : 'userPhone',
                    title : '用户手机'
                },
                {
                    field : 'userEmail',
                    title : '用户邮箱'
                },
                {
                    field : 'userBalance',
                    title : '用户余额'
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>
